<template>
  <view class="root">
    <view class="container">
      <view class="">
        <image mode="aspectFit" class="logo" src="/static/img/logo.png"></image>
      </view>
      <view class="text-gray text-center margin-top text-xl">{{ title }}</view>
    </view>
    <view class="actions">
      <view class="flex flex-direction">
        <!--<button class="cu-btn bg-brown shadow xl margin-lg" open-type="getUserInfo" @getuserinfo="getUserInfo">登录</button>-->
        <button class="cu-btn bg-brown shadow xl margin-lg primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
          微信手机号登录
        </button>
      </view>
    </view>
    <!--<view class="flex flex-direction">-->
    <!--  <button class="cu-btn bg-grey shadow xl margin-lr-lg" @click="core.navigateBack()">取消</button>-->
    <!--</view>-->
  </view>
</template>

<script>
import Api from "@/utils/Api";

export default {
  data() {
    return {
      title: uni.globalData.name,
    }
  },
  methods: {
    getPhoneNumber(res) {
      this.login(res.detail)
    },
    //向后台服务器登录
    login(info) {
      if (info.errMsg.indexOf("fail auth deny") > -1) return uni.core.showToast("您拒绝了授权登录！");

      console.log("获取手机号", info, this.code);
      uni.core.showLoading("请稍等");

      let {iv, encryptedData} = info;

      Api.bindMobile(encryptedData, iv).then(res => {
        this.req.getUserInfoCache(userInfo=>{
          userInfo.mobile = res;
          this.req.setUserInfoCache(userInfo);
          this.core.prePageHandleMethod('refresh')
          uni.navigateBack()
        })
      }).finally(() => uni.hideLoading())
    },
  },
  onShow() {
    uni.login({
      provider: 'weixin',
      success: loginRes => {
        this.code = loginRes.code;
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.root{
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: calc(100vh - var(--window-top));

  .container {
    //margin-top: r(360px);

    .logo {
      height: r(180px);
      width: r(180px);
    }
  }

  .actions{
    margin-top: r(90px);
    width: 100%;
    padding: r(0 90px);

    .cu-btn{
      height: r(80px);
      border-radius: r(20px);

      &.primary{
        background-color: $primary-color;
      }
    }
  }
}
</style>
